<template>
    <el-card shadow="never" class="statement_quantity_box">
        <div class="title-box">
            数据概览
            <el-tooltip placement="top">
                <template #content>
                    收集份数：提交收集表的份数。<br />
                    填写人数：提交收集表的人数，同一用户提交多次仅统计一次。<br />
                    <template v-if="basic.jump_type == 1 && basic.jump_limit == 2">
                        新增客户数：提交收集表后通过引流码新增的客户数。<br />
                        （当前活动新增的客户，非企业新客户）
                    </template>
                    <template v-if="basic.jump_type == 2 && basic.jump_limit == 2"> 通过此收集表进群的人数 </template>
                </template>
                <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
            </el-tooltip>
        </div>
        <el-divider />
        <div class="num_box_list">
            <div class="num_box">
                <div class="title">收集表份数</div>
                <div class="num">{{ numFormat(basic.total_num) }}</div>
            </div>
            <div class="num_box">
                <div class="title">填写人数</div>
                <div class="num">{{ numFormat(basic.people_num) }}</div>
            </div>
            <div v-if="basic.jump_type == 1 && basic.jump_limit == 2" class="num_box">
                <div class="title">新增客户数</div>
                <div class="num">{{ numFormat(basic.new_cust) }}</div>
            </div>
            <!-- todo:净增人数 -->
            <div v-if="basic.jump_type == 2 && basic.jump_limit == 2" class="num_box">
                <div class="title">新增群用户数</div>
                <div class="num">{{ numFormat(basic.join_num) }}</div>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { numFormat } from '@/utils/utils';
import { withDefaults, defineProps } from 'vue';
interface Props {
    basic: any;
}
withDefaults(defineProps<Props>(), {
    basic: () => {
        return {
            jump_type: '', //1-员工 2-群
            total_num: 0, //收集表份数
            people_num: 0, //填写人数
            new_cust: 0, //新增客户数 type=1
            join_num: 0 //净增人数 type =2
        };
    }
});
</script>

<style lang="scss" scoped>
.statement_quantity_box {
    /* padding: 40px 0; */
    margin-bottom: 16px;

    :deep .el-card__body {
        // width: 50%;

        /* padding: 0; */
        .title-box {
            display: flex;
            align-items: center;
        }

        .help_icon {
            margin-left: 8px;
            width: 16px;
        }

        .num_box_list {
            display: flex;
            padding: 40px 0;
        }

        .num_box {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;

            .title {
                padding-bottom: 16px;
                display: flex;
                align-items: center;
            }

            .num {
                font-size: 46px;
                font-family: SFNSDisplay;
                color: #ff6b00;
            }
        }
    }
}
</style>
